<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="考试名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入考试名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="频次" prop="frequency">
        <el-input v-model="queryParams.frequency" placeholder="请输入频次" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="开始时间" prop="examStartTime">
        <el-date-picker clearable v-model="queryParams.examStartTime" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="examEndTime">
        <el-date-picker clearable v-model="queryParams.examEndTime" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="考试时长" prop="examDuration">
        <el-input v-model="queryParams.examDuration" placeholder="请输入考试时长" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="statu">
        <el-input v-model="queryParams.statu" placeholder="请输入状态" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain size="mini" @click="updateStatu" >启用</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table border v-loading="loading" :data="ExamPlanList" @selection-change="handleSelectionChange">
      <el-table-column resizable show-overflow-tooltip type="selection" width="55" align="center" />
      <el-table-column resizable show-overflow-tooltip type="expand">
        <template #default="props">
          <el-table border :data="props.row.examPlanVenueList">
            <el-table-column resizable show-overflow-tooltip label="考试地点" prop="examPlace" />
            <el-table-column resizable show-overflow-tooltip label="开始时间" prop="examStartTime" />
            <el-table-column resizable show-overflow-tooltip label="结束时间" prop="examEndTime" />
            <el-table-column resizable label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleVenueUpdate(scope.row)"
                  >修改
                </el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleVenueDelete(scope.row)"
                  >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="考试名称" align="center" prop="name" />
      <el-table-column resizable show-overflow-tooltip label="试卷模板" align="center" prop="examTestPaperModuleName" />
      <el-table-column resizable show-overflow-tooltip label="部门" align="center" prop="deptId">
        <template v-slot="{ row }">
          {{ options.deptMap[row.deptId] }}
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="岗位" align="center" prop="postId">
        <template slot-scope="{row}">
          {{ options.postMap[row.postId] }}
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="级别" align="center" prop="postLevelCode">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.post_level" :value="scope.row.postLevelCode" />
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="类型" align="center" prop="examType">
        <template v-slot="{row}">
            {{PLAN_TYPE.map[row.examType]}}
          </template>
      </el-table-column>
      <!-- <el-table-column resizable show-overflow-tooltip label="频次" align="center" prop="frequency" /> -->
      <el-table-column resizable show-overflow-tooltip label="开始时间" align="center" prop="examStartTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.examStartTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="结束时间" align="center" prop="examEndTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.examEndTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="可以补考" align="center" prop="whetherCanResit">
        <template v-slot="{row}">
            {{YES_NO.map[row.whetherCanResit]}}
          </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="考试时长" align="center" prop="examDuration" />
      <el-table-column resizable show-overflow-tooltip label="状态" align="center" prop="statu">
        <template v-slot="{row}">
            {{PLAN_STATUS.map[row.statu]}}
          </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="备注" align="center" prop="remark" />
      <el-table-column resizable label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="showExamplanVenue(scope.row)" >配置考场</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            >修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 添加或修改考试计划对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="考试名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入考试名称" style="width: 320px" clearale />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="考试时长" prop="examDuration">
              <el-input v-model="form.examDuration" placeholder="请输入考试时长" style="width: 320px" clearale />
            </el-form-item>
          </el-col>

          <!-- <el-col :span="12">
            <el-form-item label="类型" prop="examType">
              <el-select v-model="form.examType" placeholder="请选择类型" style="width: 320px" @change="examTypeChange">
                <el-option v-for="item in PLAN_TYPE.list" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="补考" prop="whetherCanResit">
              <el-select v-model="form.whetherCanResit" placeholder="请选择类型" style="width: 320px">
                <el-option v-for="item in YES_NO.list" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="频次" prop="frequency" v-if="form.examType == 1">
              <el-input v-model="form.frequency" placeholder="请输入频次" style="width: 320px" clearale />
            </el-form-item>
          </el-col>-->

          <el-col :span="12">
            <el-form-item label="部门" prop="deptId">
              <dept-selector v-model="form.deptId" placeholder="请选择部门" style="width: 320px" clearale
                @change="deptChange" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="岗位" prop="postId">
              <post-selector v-model="form.postId" placeholder="请输入岗位" style="width: 320px" clearale
                @change="postChange" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="岗位级别" prop="postLevelCode">
              <el-select v-model="form.postLevelCode" placeholder="请输入级别" style="width: 320px" clearale
                @change="postLevelChange">
                <el-option v-for="dict in dict.type.post_level" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>

            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="模板" prop="examTestPaperModuleId">
              <el-select v-model="form.examTestPaperModuleId" placeholder="请选择岗位" style="width: 320px" clearale
                @visible-change="moduleVisibleChange">
                <el-option v-for="module in examTestPaperModules" :key="module.id" :label="module.name"
                  :value="module.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="开始时间" prop="examStartTime">
              <el-date-picker clearable v-model="form.examStartTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择开始时间" style="width: 320px" clearale>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="examEndTime">
              <el-date-picker clearable v-model="form.examEndTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择结束时间" style="width: 320px" clearale>
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 12}" placeholder="请输入内容" style="width: 320px" clearale />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <exam_plan_venue ref="dialog" @finishParent="getList"></exam_plan_venue>
  </div>
</template>

<script src="./index.js">

</script>
